import React, { memo, useCallback} from 'react'
import { useDispatch, useSelector } from 'react-redux'
import {
  CommentWrapper
} from './style'
import { LikeOutlined } from '@ant-design/icons'
import { Pagination } from 'antd'
import { getSongCommentsAction } from '../../store/actionCreators'
import {formatImg} from '@/utils/format'
export default memo(function Comment() {
  const dispatch = useDispatch()
  const pageSize = 35

  const { totalComment, commentList ,currentSongDetail} = useSelector(state => ({
    totalComment: state.getIn(['song', 'totalComment']),
    commentList: state.getIn(['song', 'commentList']),
    currentSongDetail:state.getIn(['song','currentSongDetail'])
  }))
  const pageChange = useCallback((page,pageSize) => {
    const offset = (page - 1) * pageSize
    dispatch(getSongCommentsAction(currentSongDetail.id,pageSize,offset))

  },[dispatch,currentSongDetail])
  return (
    <CommentWrapper>
      <div className="header">
        <span className='title'>评论</span>
        <span className='count'>共{totalComment}条评论</span>
      </div>
      <div className='line'>最新评论</div>
      <div className="list">
        {
          commentList.map(item => {
            return (
              <div key={item.commentId} className='comment_item'>
                <div className="left">
                  <img src={formatImg(item.user.avatarUrl,50)} alt="" />
                </div>
                <div className="right">
                  <p><a href="fas" className='nickname'>{item.user.nickname}</a>:{item.content}</p>
                  <div className="row">
                    <div className='time'>{item.timeStr}</div>
                    <div className="operation">
                    <LikeOutlined />({item.likedCount})<a href="fa" className='reply'>回复</a>
                    </div>
                    
                  </div>
                </div>
              </div>
            )
          })
        }
      </div>
      <Pagination defaultCurrent={1}
        total={totalComment}
        showSizeChanger={false}
        pageSize={pageSize}
        onChange={pageChange}
      className='pagination'/>
    </CommentWrapper>
  )
})
